﻿<template>
  <a-collapse activeKey="1" expand-icon-position="right">
    <a-collapse-panel key="1" header="查询条件">
      <a-form-model
        :model="params"
        ref="paramsForm"
        :labelCol="{ md: { span: 6 }, xs: { span: 24 }, sm: { span: 12 } }"
        :wrapperCol="{ md: { span: 18 }, xs: { span: 24 }, sm: { span: 12 } }"
      >
        <a-row>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="账号">
              <a-input
                v-model.trim="params.account"
                placeholder="请输入账号"
                v-keyupEnter="{ callback: handleRefresh }"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="昵称">
              <a-input
                v-model.trim="params.nickName"
                placeholder="请输入昵称"
                v-keyupEnter="{ callback: handleRefresh }"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="手机号">
              <a-input
                v-model.trim="params.phone"
                placeholder="请输入手机号"
                v-keyupEnter="{ callback: handleRefresh }"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="用户类型 ">
              <a-select
                allowClear
                v-model.trim="params.userType"
                placeholder="请选择用户类型"
                style="width: 100%"
              >
                <a-select-option
                  v-for="item in userTypeList"
                  :key="item"
                  :value="item"
                  >{{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="邮箱">
              <a-input
                v-model.trim="params.email"
                placeholder="请输入邮箱"
                v-keyupEnter="{ callback: handleRefresh }"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="微信账户">
              <a-input
                v-model.trim="params.weChartAccount"
                placeholder="请输入微信账户"
                v-keyupEnter="{ callback: handleRefresh }"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
            <a-form-model-item label="状态">
              <a-switch
                v-model="params.status"
                un-checked-children="禁用"
                checked-children="启用"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :xs="24"
            :sm="24"
            :md="6"
            :lg="6"
            :xl="6"
            :xxl="6"
            style="text-align: right"
          >
            <a-form-model-item>
              <a-button
                icon="search"
                type="primary"
                :loading="loading"
                @click="handleRefresh"
                >查询</a-button
              >
              <a-divider type="vertical" />
              <a-button icon="reload" @click="handleReset">重置</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-collapse-panel>
  </a-collapse>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
    },
  },
  data() {
    return {
      userTypeList: ["普通用户", "分销用户"],
      // 要查询的参数
      params: {
        account: null,
        nickName: null,
        phone: null,
        userType: null,
        weChartAccount: null,
        email: null,
        status: true,
      },
    };
  },
  created() {},
  methods: {
    //#region 查询数据
    handleRefresh() {
      this.$emit("handleRefresh");
    },
    //#endregion

    //#region 重置
    handleReset() {
      this.params.account = "";
      this.params.nickName = "";
      this.params.phone = "";
      this.params.userType = "";
      this.params.weChartAccount = "";
      this.params.email = "";
      this.params.status = true;
    },
    //#endregion
  },
};
</script>
